<script setup lang="ts">
import { Cell, CellGroup } from 'vant';
import {useRouter} from 'vue-router';
const router = useRouter()
const goRouteUse = ()=>{
  router.push({
    name:'RouteUse',
    query:{
      id:10001
    }
  })
}
</script>

<template>
  <main class="main">
    <van-nav-bar title="基本使用" fixed placeholder/>
    <div class="cell">
      <van-cell title="vant组件使用" is-link to="VantUse" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="发起HTTP请求" is-link to="ApiUse" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="组件传参" is-link size="large" to="DefinedProps"/>
    </div>
    <div class="cell">
      <van-cell title="获取assets里的图片" is-link to="GetImg" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="路由获取和使用" is-link @click="goRouteUse" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="获取this" is-link to="ThisUse" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="Pinia使用" is-link to="PiniaUse" size="large"/>
    </div>
    <div class="cell">
      <van-cell title="I18n使用" is-link to="I18nUse" size="large"/>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.main{
  background:#f7f8fa;
  min-height:100vh;
  .cell{
    margin:10px 0px;
  }
}
</style>
